// 这是 gulp 专门的 js文件
// 定义 gulp 执行的相关的程序

/*
    gulp 相关程序说明
        gulp.src()  gulp依赖包中 定义的 函数程序方法
                    导入加载 指定的文件 执行之后的 打包压缩规范

                    *.css   文件名是任意名称 扩展名是 css的文件

                    *.*     文件名 和 扩展名 都是 任意的文件
                            也就是 所有文件

                    **      所有文件和所有文件夹中的内容
                    
        gulp.dest() gulp依赖包中 定义的 函数程序方法
                    将 gulp.src() 导入的文件
                    存储到 指定的文件夹中
                    如果没有设定的文件夹 会 自动创建一个文件夹

        gulp.pipe() gulp依赖包中 定义的 函数程序方法
                    所有的 gulp的依赖包和gulp自带的一些程序 
                    都要在 gulp.pipe() 中执行 
                    这是 gulp的语法规范
                    执行程序的对象 都是 gulp.src() 导入的内容

        gulp.series()   gulp依赖包中 定义的 函数程序方法
                        按照顺序执行 设定的程序

         gulp.parallel()    gulp依赖包中 定义的 函数程序方法
                            同时执行 设定的程序

    gulp打包程序的设定 都是固定的语法规范
    一般只能修改 路径 和 参数配置 的设定
*/

// 1, 导入 所有下载的 开发依赖包
// 导入 gulp 依赖包
const gulp = require('gulp');

// 导入 css 依赖包
const autoprefixer = require('gulp-autoprefixer');
const cssmin = require('gulp-cssmin');

// 导入 js 依赖包  下载4个依赖包 只需要导入2个就可以了
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');

// 导入 html 依赖包
const htmlmin = require('gulp-htmlmin');

// 导入 sass 依赖包 
const sass = require('gulp-sass');

// 导入 删除 依赖包 
const del = require('del');

// 导入 服务器 依赖包 
const webserver = require('gulp-webserver');

// 2, 设定 gulp打包规范 

// 2-1 css打包压缩规范
const cssHandler = function(){
    // 通过 return 设定 返回值 就是 需要执行的程序
    // 调用 函数程序时 cssHandler() 就是 调用 return 的程序
    return gulp.src('./src/css/*.css')          //  导入 src文件夹下 css文件夹中 扩展名是 css的文件
           .pipe( autoprefixer() )              //  添加前缀
           .pipe( cssmin() )                    //  打包压缩 
           .pipe( gulp.dest('./dist/css'));     //  将文件内容存储到 dist文件夹下 css文件夹中
}

// 2-2 sass打包压缩规范
const sassHandler = function(){
    // 通过 return 设定 返回值 就是 需要执行的程序
    // 调用 函数程序时 sassHandler() 就是 调用 return 的程序
    return gulp.src('./src/sass/*.scss')        //  导入 src文件夹下 css文件夹中 扩展名是 css的文件
           .pipe( sass() )                      //  将导入的scss文件编译为css文件 之后按照css规范 打包压缩
           .pipe( autoprefixer() )              //  添加前缀
           .pipe( cssmin() )                    //  打包压缩 
           .pipe( gulp.dest('./dist/css'));     //  将文件内容存储到 dist文件夹下 css文件夹中
}

// 2-3 js打包压缩规范
const jsHandler = function(){
    // 通过 return 设定 返回值 就是 需要执行的程序
    // 调用 函数程序时 jsHandler() 就是 调用 return 的程序
    return gulp.src('./src/js/*.js')            //  导入 src文件夹下 js文件夹中 扩展名是 的文件
           .pipe( babel({presets: ['@babel/env'] }) )                     //  其他版本转化为ES5版本
           .pipe( uglify() )                    //  打包压缩 
           .pipe( gulp.dest('./dist/js'));      //  将文件内容存储到 dist文件夹下 js文件夹中
}

// 2-4 js打包压缩规范
const htmlHandler = function(){
    // 通过 return 设定 返回值 就是 需要执行的程序
    // 调用 函数程序时 jsHandler() 就是 调用 return 的程序
    return gulp.src('./src/pages/*.html')        //  导入 src文件夹下 js文件夹中 扩展名是 的文件
           .pipe( htmlmin({                      // 以对象的形式 设定 相关的配置参数
                removeAttributeQuotes:true,      // 删除属性值中的双引号
                removeComments:true,             // 删除注释
                // removeEmptyAttributes:true,      // 删除空属性
                // removeEmptyElements:true,        // 删除空标签
                removeScriptTypeAttributes:true,    // 删除 script标签 type属性
                removeStyleLinkTypeAttributes:true, // 删除 style,link 标签 type属性
                collapseBooleanAttributes:true,     // 删除 布尔属性的属性值
                collapseWhitespace:true,            // 删除 标签之间的空格回车
                minifyCSS:true,                     // 压缩 内部css语法
                minifyJS:true,                      // 压缩 内部js语法 压缩有问题 js一定不要写成内部语法 
           }))
           .pipe( gulp.dest('./dist/pages'));       //  将文件内容存储到 dist文件夹下 pages文件夹中
}

// 2-5 图片,音频,视频,后端文件,已经压缩好的文件... 
// 不同 压缩 直接 存储到 相对应的文件夹中

// 图片
const imgHandler = function(){
    return gulp.src('./src/message/*.*')            //  导入 src文件夹下 message文件夹中 所有文件
           .pipe( gulp.dest('./dist/message'));     //  将文件内容存储到 dist文件夹下 message文件夹中
}

// PHP
const phpHandler = function(){
    return gulp.src('./src/server/*.php')           //  导入 src文件夹下 server文件夹中 扩展名是 php的文件
           .pipe( gulp.dest('./dist/server'));     //  将文件内容存储到 dist文件夹下 server文件夹中
}

// 插件
const toolsHandler = function(){
    return gulp.src('./src/tools/**')             //  导入 src文件夹下 tools文件夹中 所有的文件和文件夹
           .pipe( gulp.dest('./dist/tools'));     //  将文件内容存储到 dist文件夹下 tools文件夹中
}




// 2-? 删除的执行规范
const deHandler = function(){
    return del([ './dist' ]);   // del([路径1,路径2...]) 设定要删除的文件夹路径
}

// 3, 执行 设定的压缩规范 设定为监听执行模式
const watchHandler = function(){
    gulp.watch( './src/css/*.css' , cssHandler );          // 设定 监听文件路径 当文件内容改变 触发执行对应的 打包压缩规范
    gulp.watch( './src/js/*.js' , jsHandler );             // 设定 监听文件路径 当文件内容改变 触发执行对应的 打包压缩规范
    gulp.watch( './src/sass/*.scss' , sassHandler );       // 设定 监听文件路径 当文件内容改变 触发执行对应的 打包压缩规范
    gulp.watch( './src/pages/*.html' , htmlHandler );      // 设定 监听文件路径 当文件内容改变 触发执行对应的 打包压缩规范
    gulp.watch( './src/message/*.*' , imgHandler );        // 设定 监听文件路径 当文件内容改变 触发执行对应的 打包压缩规范
    gulp.watch( './src/server/*.php' , phpHandler );       // 设定 监听文件路径 当文件内容改变 触发执行对应的 打包压缩规范
    gulp.watch( './src/tools/**' , toolsHandler );         // 设定 监听文件路径 当文件内容改变 触发执行对应的 打包压缩规范
}

// 4, 执行 所有的设定的规范
// 使用 设定 gulp 默认程序的方式
// 设定发导出默认方式之后 只需要 执行 gulp 命令
// gulp 会自动 读取 导出的默认default程序 来执行
module.exports.default = gulp.series(
    // 先删除原始的dist压缩文件夹
    deHandler,

    // 执行所有的 打包规范 
    gulp.parallel( cssHandler , sassHandler , jsHandler , htmlHandler , imgHandler , phpHandler , toolsHandler ) ,

    // 执行监听程序 
    watchHandler,
);

